class Watcher {
    // watcher 把 compile 和 observer 关联起来
    constructor(vm,expr,cb){
        // vm 当前vue实例
        this.vm = vm;
        this.expr = expr;
        this.cb = cb;
        // this表示的就是新创建的watcher对象,存储到Dep.target属性上
        Dep.target = this;
        // 需要把expr的旧值给存起来
        this.oldValue = this.getVMValue(vm,expr);
        Dep.target = null;
    }
    // 对外暴露的一个方法,这个方法用于更新页面

    update(){
        // 对比expr的旧值是否发生了改变，如果改变了，需要调用cb
        let oldValue = this.oldValue;
        let newValue = this.getVMValue(vm,this.expr);
        if(oldValue!==newValue){
            this.cb(newValue,oldValue);
        }
    }
    //这个方法用于获取VM中的数据
    getVMValue(vm,expr){
     
        // 获取到vm中的所有数据
        let data = vm.$data;
        // car 如果是个对象或者数组呢
        expr.split('.').forEach(key=>{
            data = data[key]
        })
        return data 
    }
}
// Dep用于管理这里的订阅者 通知这些订阅者
class Dep {
    constructor(){
        // 用于管理订阅者
        this.subs = [];
    }
    // 添加订阅者
    addSub(watcher){
        this.subs.push(watcher);
    }
    // 通知
    notfiy(){
        // 遍历所有的订阅者 调用watcher的update方法
        this.subs.forEach(sub=>{
            sub.update();
        })
    }
}